import React, { useMemo } from 'react'
import { cn } from '@/lib/utils'
import {
  Pagination,
  PaginationContent,
  PaginationEllipsis,
  PaginationItem,
  PaginationLink,
  PaginationNext,
  PaginationPrevious,
} from '@/components/ui/pagination'

interface PaginationComponentProps {
  className?: string
  currentPage: number
  totalPages: number
  onPageChange: (page: number) => void
  isMini?: boolean
}

const PaginationComponent = ({
  className,
  currentPage,
  totalPages,
  onPageChange,
  isMini = false,
}: PaginationComponentProps) => {
  // 计算要显示的页码范围
  const pageRangeList = useMemo(() => {
    const delta = 2 // 当前页前后显示的页数
    const range = [] // 存储页码范围
    const rangeWithDots = [] // 存储带有省略号的页码范围

    // 计算当前页前后显示的页码范围
    for (
      let i = Math.max(2, currentPage - delta); // 确保页码不小于2
      i <= Math.min(totalPages - 1, currentPage + delta); // 确保页码不大于总页数减1
      i++
    ) {
      range.push(i) // 将页码添加到范围数组中
    }

    // 如果当前页前的页码范围大于2，则添加省略号
    if (currentPage - delta > 2) {
      rangeWithDots.push(1, '...') // 添加第一页和省略号
    } else {
      rangeWithDots.push(1) // 仅添加第一页
    }

    rangeWithDots.push(...range) // 将计算出的页码范围添加到结果数组中

    // 如果当前页后的页码范围小于总页数减1，则添加省略号
    if (currentPage + delta < totalPages - 1) {
      rangeWithDots.push('...', totalPages) // 添加省略号和最后一页
    } else if (totalPages > 1) {
      rangeWithDots.push(totalPages) // 仅添加最后一页
    }

    return rangeWithDots // 返回带有省略号的页码范围
  }, [currentPage, totalPages]) // 依赖于当前页和总页数

  if (totalPages <= 1) return null

  return (
    <Pagination className={cn('mt-4', className)}>
      <PaginationContent>
        <PaginationItem>
          <PaginationPrevious
            size={isMini ? 'sm' : 'default'}
            onClick={() => onPageChange(Math.max(1, currentPage - 1))}
            className={cn(
              'select-none cursor-pointer h-7 w-7 bg-white/10 rounded-[6px] gap-0 p-0 hover:bg-white/20',
              currentPage === 1 && 'opacity-50 bg-transparent pointer-events-none',
            )}
          >
            {/* 上一页 */}
            <span />
          </PaginationPrevious>
        </PaginationItem>

        {isMini ? (
          <PaginationItem>
            <span className="text-sm text-gray-500 px-4">
              {currentPage}/{totalPages}
            </span>
          </PaginationItem>
        ) : (
          pageRangeList.map((page, index) => (
            <PaginationItem key={index}>
              {page === '...' ? (
                <PaginationEllipsis className="w-7 h-7" />
              ) : (
                <PaginationLink
                  className={cn(
                    'select-none cursor-pointer h-7 w-7 hover:bg-white hover:text-black',
                    page === currentPage && 'bg-white text-black',
                  )}
                  onClick={() => typeof page === 'number' && onPageChange(page)}
                >
                  {page}
                </PaginationLink>
              )}
            </PaginationItem>
          ))
        )}

        <PaginationItem>
          <PaginationNext
            size={isMini ? 'sm' : 'default'}
            onClick={() => onPageChange(Math.min(totalPages, currentPage + 1))}
            className={cn(
              'select-none cursor-pointer h-7 w-7 bg-white/10 rounded-[6px] gap-0 p-0 flex hover:bg-white/20',
              currentPage === totalPages &&
                'opacity-50 bg-transparent pointer-events-none',
            )}
          >
            {/* 下一页 */}
            <span />
          </PaginationNext>
        </PaginationItem>
      </PaginationContent>
    </Pagination>
  )
}

export default PaginationComponent
